import { Alert, Tabs } from '@aws-amplify/ui-react';

import { InstallScripts } from '@/components/InstallScripts';
import { InlineFilter } from '@/components/InlineFilter';
import AppDirectoryAlert from '@/components/AppDirectoryAlert';

Account Settings components are a set of standalone components that add [user management](https://docs.amplify.aws/lib/auth/manageusers/q/platform/js/) flows to your application with minimal boilerplate.

<Alert variation="warning" role="none">
  Account Settings components require end user to be authenticated. You can use the [`Authenticator`](/connected-components/authenticator) component to add authentication UI to your application.
</Alert>

## Quick Start

<InlineFilter filters={['react']}>
  <AppDirectoryAlert />
</InlineFilter>


### Step 1. Configure Backend

Account settings components work seamlessly with the [Amplify CLI](https://docs.amplify.aws/cli/start/install/)
to **automatically** work with your backend.

First, update `@aws-amplify/cli` with [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
if you're using a version before `6.4.0`:

<Tabs.Container defaultValue="npm">
  <Tabs.List>
    <Tabs.Item value="npm">npm</Tabs.Item>
    <Tabs.Item value="yarn">yarn</Tabs.Item>
  </Tabs.List>
<Tabs.Panel value="npm">

```shell
npm install -g @aws-amplify/cli@latest
```

</Tabs.Panel>
<Tabs.Panel value="yarn">

```shell
yarn global add @aws-amplify/cli@latest
```

</Tabs.Panel>
</Tabs.Container>

### Step 2. Install Dependencies

<InstallScripts />

### Step 3. Add Account Settings Components 

Get started by using AccountSettings with either the [`ChangePassword`](/connected-components/account-settings/change-password) or [`DeleteUser`](/connected-components/account-settings/delete-user) components. 
